<template>
  <div>
    <h2>Home组件</h2>
    <!-- 
      声明式路由导航-使用router-link组件,支持用户在具有路由功能的应用中 (点击) 导航
      跳转路由两种模式  字符串和location模式
      -->
    <!--  
    字符串模式 
    <router-link to="/Home/News" tag="button">新闻</router-link>
    <router-link to="/Home/Music" tag="button">音乐</router-link>
    <router-link to="/Home/Game" tag="button">游戏</router-link> 
    -->

    <!-- 
      replace属性让路由跳转的过程中替换之前的历史记录
      active-class:设置链接激活时使用的 CSS 类名
    -->

    <!-- 
      location对象模式
      <router-link
      :to="{
        path: '/Home/News',
      }"
      tag="button"
      replace
      active-class="active"
      >新闻</router-link
    >
    <router-link
      :to="{
        name: 'Music',
      }"
      tag="button"
      replace
      active-class="active"
      >音乐</router-link
    >
    <router-link
      :to="{
        name: 'Game',
      }"
      tag="button"
      replace
      active-class="active"
      >游戏</router-link
    > 
    -->

    <!-- 编程式路由导航 -->
    <button @click="toNews">新闻</button>
    <button @click="toMusic">音乐</button>
    <button @click="toGame">游戏</button>
    <!-- home中的二级路由出口 -->
    <!-- 
      在路由中使用keep-alive
      include和exclude的值是组件的name属性
     -->
    <keep-alive include="News">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    toNews() {
      /* 
        编程式路由导航,我们使用我们给每一个组件实例注入的$router上的方法(在VueRouter.prototype上)
          - this.$router.push():push参数有两种:string和location对象
          - this.$router.replace()
          - this.$router.go()
      */
      /* 
        push重复导航会报出promise的错:
         - push在导航时,如果发现已经是当前路径,则会抛出promise异常
         - push如果书写第二个和第三个参数,代表成功和失败的回调函数就可以了
         - push如果不书写回调函数,则默认返回promise实例,我们需要使用catch来接受异常也可以解决
      */
      this.$router.push(
        '/Home/News',
        () => {},
        () => {}
      )
    },
    toMusic() {
      this.$router
        .push({
          name: 'Music'
        })
        .catch(() => {})
    },
    toGame() {
      this.$router
        .push({
          name: 'Game'
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped>
.active {
  background: yellow;
}
</style>
